<template>
  <div class="travelExpenses" id="printForm">
    <div class="travelExpenses-head">
      <img :src="objData.qrcode" class="travelExpenses-code" alt="" width="100" height="100" />
      <div class="travelExpenses-head-text">
        <h1>会议费报销单</h1>
        <p>填报日期：{{ objData.reimbursementDate }}</p>
      </div>
    </div>
    <table width="100%" height="500px" border="1" align="center" cellpadding="1" cellspacing="1" class="table-form-1">
      <tr>
        <td rowspan="2">会议类别</td>
        <td rowspan="2" colspan="2"></td>
        <td>会议地点</td>
        <td colspan="4">{{ meetingsData.meetingAddress }}</td>
      </tr>
      <tr>
        <td>会议时间</td>
        <td colspan="4">{{ meetingsData.meetingStart }}</td>
      </tr>
      <tr>
        <td>参会人数</td>
        <td>{{ meetingsData.meetingPeoples }}</td>
        <td>工作人员数</td>
        <td>{{ meetingsData.meetingWorkers }}</td>
        <td>会议计划</td>
        <td colspan="3">{{ meetingsData.meetingPlan }}</td>
      </tr>
      <tr>
        <td>会议内容</td>
        <td colspan="7">{{ meetingsData.meetingContent }}</td>
      </tr>
      <tr>
        <td>合计金额</td>
        <td>住宿费</td>
        <td>伙食费</td>
        <td>会议室租金</td>
        <td>交通费</td>
        <td>文件印刷费</td>
        <td>医药费</td>
        <td>其他</td>
      </tr>
      <tr>
        <td>{{ parseInt(meetingsData.amountHotel) + parseInt(meetingsData.amountCatering) + parseInt(meetingsData.amountRent) + parseInt(meetingsData.amountCar) + parseInt(meetingsData.amountPaper) + parseInt(meetingsData.amountMedicine) + parseInt(meetingsData.amountOther) }}</td>
        <td>{{ meetingsData.amountHotel }}</td>
        <td>{{ meetingsData.amountCatering }}</td>
        <td>{{ meetingsData.amountRent }}</td>
        <td>{{ meetingsData.amountCar }}</td>
        <td>{{ meetingsData.amountPaper }}</td>
        <td>{{ meetingsData.amountMedicine }}</td>
        <td>{{ meetingsData.amountOther }}</td>
      </tr>
      <tr>
        <td>院长</td>
        <td></td>
        <td>分管财务院领导</td>
        <td></td>
        <td>分管部门院领导</td>
        <td></td>
        <td>部门负责人</td>
        <td></td>
      </tr>
      <tr>
        <td>基本支出财务负责人</td>
        <td></td>
        <td>项目支出财务负责人</td>
        <td></td>
        <td>会计审核</td>
        <td></td>
        <td>会计审核</td>
        <td></td>
      </tr>
      <tr>
        <td colspan="6"></td>
        <td>经办人</td>
        <td></td>
      </tr>
    </table>
  </div>
  <div style="margin-top: 20px;">
    <el-button type="primary" v-print="'#printForm'" @click="doPrint">打印</el-button>
  </div>
</template>
<script setup>
import {ref, watch} from 'vue'
import {doGet} from "@/config/http";
import {svc, genQrcodeStr} from "@/config/common";

const props = defineProps({
  meetingsData: {
    required: true,
    type: Array,
  },
  objData: {
    required: true,
    type: Object,
  },
})

const emit = defineEmits(['close', 'projectListSelect'])

// tab 切换
let activeName = ref('first')
// 基本数据
let obj = ref({})

let meetingsData = ref({})

let objData = ref({})

// 附件
let fileList = ref([])


// // 单位列表
// let governmentList = ref([])
// // 主管部门
// let organizationList = ref([])

// const userList = ref([])
// const expenditurePtypeList = ref([])
// const expenditureFunctionalList = ref([])
// const expenditureEconomicList = ref([])
// const expenditureFiscalList = ref([])
// const expenditureSubjectList = ref([])

let attachmentVisible = ref(false)

watch(() => [props.meetingsData, props.objData], async vals => {
  meetingsData.value = vals[0][0]
  objData.value = vals[1]
  let str = genQrcodeStr("expenditure.reimbursement.meetings", objData.value.id, objData.value['reimbursementCode'])
  let img = await doGet(svc, '/customCode/qrcode', {content: str, width:100, height:100}, false)
  objData.value.qrcode = 'data:image/gif;base64,' + img
},{immediate:true})

function doPrint() {
  console.log("doPrint", objData.value)
}
</script>

<style scoped>
.travelExpenses {
  width: 100%;
}
.travelExpenses-head {
  width: 100%;
  display: flex;
}
.travelExpenses-code {
  width: 100px;
  height: 100px;
}
.travelExpenses-head-text {
  width: 100%;
}
.travelExpenses-head-text h1 {
  height: 50px;
  text-align: center;
  padding: 0;
  margin: 0;
}
.travelExpenses-head-text p {
  height: 50px;
  text-align: right;
  font-size: 16px;
  padding: 0;
  margin: 0;
}
.table-form-1 {
  border-collapse: collapse;
  text-align:center;
  table-layout:fixed;
  margin-top: 10px;
}
td {
  padding: 10px 0;
}
</style>
